<template>
  <div class="ivu-box">
    <Breadcrumb>
      <BreadcrumbItem>订单管理</BreadcrumbItem>
      <BreadcrumbItem>审核订单</BreadcrumbItem>
    </Breadcrumb>
    <div class="borderCard" style="display: block">
      <div v-for="(item, index) in data" :key="index">
        <Table :columns="columns1" :data="item.order_goods">
          <template slot-scope="{ row }" slot="pic">
            <img
              :src="row.pic"
              @click="$preview(row.pic)"
              style="width: 100%"
            />
          </template>
        </Table>
      </div>
    </div>
    <div style="display: flex; justify-content: center; margin-top: 24px">
      <Page
        background
        layout="prev, pager, next"
        :page-size="params.limit"
        :total="total"
        @on-change="handleCurrentChange"
        :current-page="params.page"
      />
    </div>
  </div>

  <!-- 		<h3>商品详情</h3>
		<div class="borderCard">
			
			
			<Table :columns="columns1" :data="tableData">
				<template slot-scope="{ row }" slot="img">
					<img :src="row.img" @click="$preview(row.img)" style="width: 100%;">
				</template>
			</Table>
			
		</div> -->
</template>

<script>
export default {
  data() {
    return {
      params: {
        page: 1,
        limit: 3,
      },
      page: {},

      form: {},
      columns1: [
        {
          title: "商品ID",
          key: "id",
          minWidth: 100,
          align: "center",
        },
        {
          title: "商品code",
          key: "code",
          minWidth: 100,
          align: "center",
        },
        {
          title: "商品名称",
          key: "product_name",
          minWidth: 100,
          align: "center",
        },
        {
          title: "商品图片",
          slot: "pic",
          minWidth: 100,
          align: "center",
        },
        {
          title: "商品数量",
          key: "product_num",
          minWidth: 150,
          align: "center",
        },
        {
          title: "商品金额",
          key: "money",
          minWidth: 150,
          align: "center",
        },
        {
          title: "商品原价",
          key: "origin_price",
          minWidth: 150,
          align: "center",
        },
        {
          title: "商品价格",
          key: "price",
          minWidth: 150,
          align: "center",
        },
      ],
      data: [],
      tableData: [],
      total: 0,
    };
  },
  methods: {
    init() {
      this.axios.post("/order/check_order", this.params).then((res) => {
        console.log("res: ", res);
        if (res.code == 1) {
          this.data = res.data.list;
          console.log("res.data: ", res.data);
          this.total = res.data.count;
          // this.tableData = res.data.list;
        }
      });
    },
    handleSizeChange(val) {
      this.request.page = 1;
      this.request.limit = val;
      this.lists();
    },
    handleCurrentChange(val) {
      this.params.page = val;
      this.init();
    },
  },
  created() {
    this.init();
  },
};
</script>

<style scoped lang="scss">
::v-deep {
  .ivu-layout-content {
    overflow: auto !important;
  }
}
.borderCard {
  overflow: auto;
  max-height: 70vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
// .borderCard ul{min-width: 300px;box-sizing: border-box;border: 1px solid #ddd;padding: 20px;}
// .borderCard ul li{list-style: none;line-height: 26px;font-size: 14px;overflow: hidden;display: block;}
// .borderCard ul li .name{color: #999;float: left;width: 130px;padding-right: 20px;text-align: right;}
// .borderCard ul li .text{color: #000;float: left;}

.borderCard ul {
  display: block;
  min-width: 300px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  padding: 20px;
  margin-bottom: 10px;
}

.borderCard ul li {
  list-style: none;
  line-height: 26px;
  font-size: 14px;
  overflow: hidden;
  display: block;
}

.borderCard ul li .name {
  color: #999;
  float: left;
  width: 130px;
  padding-right: 20px;
  text-align: right;
}

.borderCard ul li .text {
  color: #000;
  float: left;
}

h3 {
  line-height: 50px;
}

.subordinate {
  margin: 10px 20px;
}

.checkbox {
  margin: 5px 10px;
  min-width: 200px;
}

.check {
  margin-top: 5px;
  margin-left: 30px;
  min-width: 160px;
  
}

.checkboxs {
  border-bottom: 1px solid silver;
  padding-bottom: 10px;
}

.outer {
  margin: 20px 0;
  padding: 10px;
  border: 1px solid silver;
  border-radius: 5px;
}
</style>
